import { View, Image, Swiper, SwiperItem } from "@tarojs/components";
import Taro, { Component, useDidShow } from "@tarojs/taro";
import { Button, Tag, Icon } from "@antmjs/vantui";
import { useState } from "react";
import r from "../../static/R.jpg";
// import love from "../../static/love.png";
import "./copyright_exchange.scss";
// import { values } from "lodash";

const Copyright_exchange = () => {
  //标题
  Taro.setNavigationBarTitle({ title: "版权交易" });

  // useD_idShow(() => copyright_exchange);

  const [arr, setArr] = useState<any>([]); //泛型
  const [userOpenid, setOpenid] = useState();

  //增加商品收藏和删除商品收藏
  const copyright_exchange = (value: any, status: string) => {
    // value['openid'] = userOpenid
    Taro.showLoading();
    Taro.cloud
      .callFunction({
        name: "logins",
        data: {
          $url: "addSaleCollect",
          data: value
        }
      })
      .then((res: any) => {
        console.log(res);
        showexchange();
        Taro.hideLoading();
      });
  };

  useDidShow(() => {
    showexchange();
  });

  const showexchange = () => {
    Taro.cloud
      .callFunction({
        name: "logins",
        data: {
          $url: "getSale"
        }
      })
      .then((res: any) => {
        //callback回调函数
        setExchange(res.result.data);
        setOpenid(res.result.openid);
        // console.log(res.result.data.openId)
      });
  };

  const [exchange, setExchange] = useState([]);

  // const handleClick = (value: any) => {
  //   if (arr.findIndex(item => item._id === value._id) > -1) {
  //     const a = arr.findIndex(item => item._id === value._id);
  //     arr.splice(a, 1);
  //     setArr([...arr]);
  //     copyright_exchange(value, "delete");
  //   } else {
  //     setArr([...arr, value]);
  //     copyright_exchange(value, "add");
  //   }
  // };

  const Exchange = exchange.map((content, i) => (
    <View className='exchange' key={i}>
      <Icon
        name='like'
        className='exchange_collection'
        size='20px'
        color={
          content.openId && content.openId.indexOf(userOpenid) > -1
            ? "#f00"
            : "#000"
        }
        onClick={() =>
          copyright_exchange(
            content,
            content.openId.indexOf(userOpenid) > -1 ? "delete" : "add"
          )
        }
      />
      <Image
        className='exchange_img'
        src={content.image}
        mode='aspectFill'
      ></Image>
      <View className='exchange_down'>
        <View className='exchange_name'>{content.name}</View>
        <Button className='exchange_buy' type='default' disabled>
          购买
        </Button>
        <Tag className='exchange_price' type='danger'>
          ¥ {content.price}
        </Tag>
      </View>
    </View>
  ));

  // const [swiper] = useState([
  //   {
  //     image: r
  //   },
  //   {
  //     image: r
  //   },
  //   {
  //     image: r
  //   },
  //   {
  //     image: r
  //   }
  // ]);

  return (
    <View className='box'>
      {/* <View className='up'>
        <Swiper
          className='test-h'
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          // displayMultipleItems={3}
        >
          {swiper.map((item,i) => {
            return (
              <SwiperItem className='demo-text-1' key={i}>
                <View style={{ height: "25vh" }}>
                  <Image src={item.image} mode='aspectFill' />
                </View>
              </SwiperItem>
            );
          })}
        </Swiper>
      </View> */}

      <View className='exchange_box'>{Exchange}</View>
    </View>
  );
};
export default Copyright_exchange;
